// import logo from './logo.svg';
import './App.css';
// import { useState, useEffect } from 'react';
// 在React Router v6中，Switch组件已经被移除，
// 因此在使用React Router v6时，需要使用Routes组件来替代Switch组件
import { useState, Fragment, useEffect } from 'react';
import { BrowserRouter, Routes, Route } from "react-router-dom";
// import api from './api';
// React要求组件名称使用PascalCase，以便区分React组件和HTML元素。
// 在React中，定义组件时需要使用大写字母开头的PascalCase命名规则。
import Home from './pages/home'
import Article from './pages/article'
import CreateAndEditArticle from './pages/createAndEditArticle'
import Register from './pages/register'
import Login from './pages/login'
import Profile from './pages/profile'
import Settings from './pages/settings'

function App () {
  console.log('app.js')
  const [isLogin, setIsLogin] = useState(false);
  let user = sessionStorage.getItem('user') 
  user = user ? JSON.parse(user) : {}
  // console.log(data)
  
  useEffect(() => {
    if(user && user.username) {
      setIsLogin(true)
    } 
    // api.get('/api/users')
    //   .then(response => {
    //     setData(response.data);
    //   })
    //   .catch(error => {
    //     console.log(error);
    //   });
  }, []);

  return (
    <BrowserRouter>
     {/* Header */}
     <nav className="navbar navbar-light">
        <div className="container">
          <a className="navbar-brand" href="/">conduit</a>
          <ul className="nav navbar-nav pull-xs-right">
            {
              isLogin && 
              <Fragment>
                <li className="nav-item">
                  <a className="nav-link active" href="">Home</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="/article/new"> <i className="ion-compose"></i>&nbsp;New Article </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="/settings"> <i className="ion-gear-a"></i>&nbsp;Settings </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="">
                    <img src='/avator.webp' className="user-pic" />
                    {user.username}
                  </a>
                </li>
              </Fragment>
            }
            {
              !isLogin && 
              <Fragment>
                <li className="nav-item">
                      <a className="nav-link active" href="/">Home</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="/login">Sign in</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="/register">Sign up</a>
                </li>
              </Fragment>
            }
          </ul>
        </div>
      </nav>
      <Routes>
      {/* 在React Router v6中，<Route>组件的语法发生了变化，component属性被替换为element属性。 */}
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />}></Route>
        <Route path="/article/:slug" exact element={<Article />}></Route>
        <Route path="/editor" exact element={<CreateAndEditArticle />}></Route>
        <Route path="/profile" exact element={<Profile />}></Route>
        <Route path="/settings" exact element={<Settings />}></Route>
      </Routes>
      {/* Footer */}
      <footer>
        <div className="container">
          <a href="/" className="logo-font">conduit</a>
          <span className="attribution">
            An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp;
            design licensed under MIT.
          </span>
        </div>
      </footer>
    </BrowserRouter>
  );
}

export default App;
